{% load static %}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>河南省华帝建设工程有限公司</title>
    <link rel="icon" href="{% static 'img/favicon.ico' %}" type="image/x-icon">
</head>
<style>
/* CSS 保持不变 */
body {
    font-family: Arial, sans-serif;
}

.image-item {
    display: inline-block;
    margin: 10px;
    text-align: center;
}

.thumbnail {
    width: 150px;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s;
}

.thumbnail:hover {
    transform: scale(1.05);
}

.modal {
    display: flex;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #fefefe;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    position: relative;
    max-width: 90%;
    max-height: 90%;
    box-sizing: border-box;
}

.close {
    position: absolute;
    top: 2%;
    right: 2%;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.modal-image {
    width: 85%;
    max-height: calc(100vh - 100px);
    object-fit: contain;
    margin-bottom: 10px;
}

.modal-title {
    font-size: 18px;
    color: #333;
    font-weight: 700;
}

@media (max-width: 768px) {
    .modal-content {
        max-width: 95%;
        max-height: 95%;
    }
    
    .modal-image {
        width: 95%;
    }
}
</style>
<body>

    {% include 'navbar.html' %}
    {% verbatim %}
    <div id="app">
        <div class="top-contont">
            <div class="txt">
                <div class="ytable h100pc auto-inner">
                    <div class="ytable-cell">
                        <h2 class="wow fadeInRight animated" style="visibility: visible; animation-name: fadeInRight;">
                            企业证书
                        </h2>
                        <p class="wow fadeInRight animated" data-wow-delay="0.3s"
                            style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInRight;">
                            以质量求生存，以诚信谋发展
                        </p>
                    </div>
                </div>
            </div>
            <img src="../static/img/aboutda.jpg" class="img-block pc" alt="关于我们">
            <img src="../static/img/aboutxiao.jpg" class="img-block wap" alt="关于我们">
        </div>
        <nav class="nav-menu">
            <section class="auto-inner">
                <ul class="ul clearfix">
                    <li :class="{aon: honourType === 'qualification'}"><a href="javascript:void(0);"
                            @click="changeHonourType('qualification')" class="dot">资质证书</a></li>
                    <li :class="{aon: honourType === 'enterprise_honour'}"><a href="javascript:void(0);"
                            @click="changeHonourType('enterprise_honour')" class="dot">荣誉证书</a></li>
                </ul>
            </section>
        </nav>
        <div class="Content">
            <section class="auto-inner">
                <div class="honor-list">
                    <ul class="ul clearfix">
                        <li v-for="item in items" :key="item.id" class="wow fadeInUp animated"
                            style="visibility: visible; animation-name: fadeInUp;">
                            <div class="ytable">
                                <div class="ytable-cell">
                                    <img :src="item.image_url" :alt="item.description" @click="openModal(item)">
                                </div>
                            </div>
                            <aside>
                                <p class="dot3">{{ item.description }}</p>
                            </aside>
                        </li>
                    </ul>
                </div>
                <div class="Pagination ">
                    <span class="p_cur">目前在第<b v-text="page"></b>页, </span>
                    <span class="p_count">共有<b v-text="totalPages"></b>页, </span>
                    <span class="p_total">共有<b v-text="totalItems"></b>条记录</span>
                    <span class="p_page">
                        <a href="javascript:void(0);" class="a_first" @click="getHonour(1)">第一页</a>
                        <a href="javascript:void(0);" class="a_prev" @click="prevPage">上一页</a>
                        <em class="num">
                            <a v-for="n in paginationNumbers" :key="n" href="javascript:void(0);"
                                :class="{'a_cur': n === page, 'a_num': n !== page}" @click="getHonour(n)"
                                v-text="n"></a>
                        </em>
                        <a href="javascript:void(0);" class="a_next" @click="nextPage">下一页</a>
                        <a href="javascript:void(0);" class="a_end" @click="getHonour(totalPages)">最后一页</a>
                    </span>
                    <span class="p_jump">
                        <b class="f1">跳转到</b>
                        <input type="text" class="i_text" v-model.number="jumpPage">
                        <b class="f2">页</b>
                        <input type="button" class="i_button" @click="getHonour(jumpPage)" value="Go">
                    </span>
                </div>
            </section>
        </div>

        <!-- Modal -->
        <div id="imageModal" v-if="showModal" class="modal" @click.self="closeModal"> <!-- 添加@click.self -->
            <div class="modal-content">
                <span class="close" @click="closeModal">&times;</span>
                <img :src="currentImage.image_url" class="modal-image" :alt="currentImage.description">
                <div class="modal-title">{{ currentImage.title }}</div>
            </div>
        </div>
        
    </div>

    {% endverbatim %}
    <script src="{% static 'vendor/vue/vue-2.6.12.js' %}"></script>
    <script src="{% static 'vendor/axios/axios.min.js' %}"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                items: [],
                page: 1,
                size: 12, // 每页显示多少个项目
                totalPages: 0,
                totalItems: 0,
                jumpPage: 1,
                next: null,
                previous: null,
                honourType: 'qualification', // 默认类型为资质证书
                showModal: false, // 控制模态框的显示状态
                currentImage: { image_url: '', title: '', description: '' } // 当前被点击的图片信息
            },
            computed: {
                paginationNumbers() {
                    let numbers = [];
                    for (let i = 1; i <= this.totalPages; i++) {
                        numbers.push(i);
                    }
                    return numbers;
                }
            },
            methods: {
                getHonour(pageNumber) {
                    axios.get('/api/honour/list', {
                        params: {
                            honour_type: this.honourType, // 使用当前选择的类型
                            page: pageNumber,
                            size: this.size
                        }
                    }).then(response => {
                        this.items = response.data.results;
                        this.page = pageNumber;
                        this.totalItems = response.data.count;
                        this.totalPages = Math.ceil(this.totalItems / this.size);
                        this.next = response.data.next;
                        this.previous = response.data.previous;
                    }).catch(error => {
                        console.error('Error fetching honours:', error);
                    });
                },
                prevPage() {
                    if (this.previous) {
                        this.getHonour(this.page - 1);
                    }
                },
                nextPage() {
                    if (this.next) {
                        this.getHonour(this.page + 1);
                    }
                },
                changeHonourType(type) {
                    this.honourType = type;
                    this.page = 1; // 重置到第一页
                    this.getHonour(this.page); // 加载新类型的数据
                },
                openModal(item) {
                    this.currentImage = item; // 设置当前图片的信息
                    this.showModal = true; // 显示模态框
                },
                closeModal() {
                    this.showModal = false; // 隐藏模态框
                }
            },
            mounted() {
                this.getHonour(this.page);
            }
        });

    </script>
</body>

</html>
